<template>
  <layout :showBg="false">
    <template #header>
      <pageHead title="添加收款账户"> </pageHead>
    </template>
    <view class="content">
      <view class="form">
        <view class="item flex">
          <view class="label">真实姓名</view>
          <input
            class="input"
            type="text"
            v-model="formData.name"
            placeholder="请输入真实姓名"
          />
        </view>
        <view class="item flex">
          <view class="label">身份证号</view>
          <input
            class="input"
            type="text"
            v-model="formData.identityNo"
            placeholder="请输入身份证号"
            maxlength="18"
          />
        </view>
        <view class="item flex">
          <view class="label">账户类型</view>
          <view class="info flex">
            <view class="r-type flex flex-a" @click="formData.accountType = 0">
              <image
                class="radio"
                v-if="formData.accountType == 1"
                src="../../../assets/images/common/radio.png"
              />
              <image
                class="radio"
                v-else
                src="../../../assets/images/common/radio-checked.png"
              />
              <text>银行卡</text>
            </view>
            <view class="r-type flex flex-a" @click="formData.accountType = 1">
              <image
                class="radio"
                v-if="formData.accountType == 0"
                src="../../../assets/images/common/radio.png"
              />
              <image
                class="radio"
                v-else
                src="../../../assets/images/common/radio-checked.png"
              />
              <text>支付宝</text>
            </view>
          </view>
        </view>
        <view class="item flex">
          <view class="label">{{
            formData.accountType == 0 ? "银行卡号" : "支付宝账号"
          }}</view>
          <input
            class="input"
            type="text"
            v-model="formData.accountNumber"
            :placeholder="
              formData.accountType == 0 ? '请输入银行卡号' : '请输入支付宝账号'
            "
          />
        </view>
        <view class="item flex">
          <view class="label">手机号码</view>
          <input
            class="input"
            type="number"
            v-model="formData.mobileNo"
            placeholder="请输入手机号"
            maxlength="11"
            @focus="onBlur"
          />
        </view>
        <view class="item flex">
          <view class="label">验证码</view>
          <input
            class="input code-input"
            type="number"
            v-model="formData.verifyCode"
            placeholder="请输入验证码"
            maxlength="6"
          />
          <!-- <view class="active-btn code-btn fs-32">获取验证码</view> -->
          <text
            @click="onGetCode"
            :class="time != 59 ? 'code-btn-disabled' : ''"
            class="active-btn code-btn t-center"
          >
            {{ btnText }}
          </text>
        </view>
      </view>
      <view class="fixed">
        <agreement
          style="margin-bottom: 34rpx"
          ref="agreement"
          :showTip="showTip"
          @agree="onAgree"
        />
        <view class="btn-box">
          <view class="active-btn fs-32" @click="onSave">确定</view>
        </view>
      </view>
    </view>
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import pageHead from "../../../compennts/pageHead/index.vue";
import agreement from "../../../compennts/agreement/index.vue";
import {
  accountAliSave,
  getBankInfo,
  getBankCode,
  accountBankSave,
} from "../../../api/setting/index";
import { isAvailableVal } from "../../../assets/utils/index";
import { getCode } from "../../../api/auth";
export default {
  components: {
    layout,
    pageHead,
    agreement,
  },
  data() {
    return {
      formData: {
        name: "",
        accountType: 0,
        identityNo: "",
        accountNumber: "",
        mobileNo: "",
        verifyCode: "",
      },
      isAgree: false,
      showTip: false,
      time: 59,
      timer: null,
      btnText: "获取验证码",
      bankInfo: null,
      isGetting:false,
    };
  },
  watch: {
    "formData.accountType": {
      handler(val) {
        console.log(val);
        this.formData.verifyCode = "";
        this.bankInfo = null;
        this.formData.accountNumber = "";
      },
    },
    time(){
      console.log(this.time)
      if(this.time == 0){
        clearInterval(this.timer)
        this.isGetting = false
      }
    }
  },
  methods: {
    toProtocol() {},
    onCheckVal(key, val) {
      let res = isAvailableVal[key](val);
      if (res.tip) {
        this.$u.toast(res.tip);
      }
      return res.available;
    },
    onAgree(val) {
      this.isAgree = val;
    },
    onBlur() {
      console.log("blur");
      // if(this.formData.accountType == 0){
      //   if(!this.formData.accountNumber) return this.$u.toast('请输入银行卡号')
      //   getBankInfo(this.formData.accountNumber).then(res=>{
      //     console.log(res)
      //     this.bankInfo = res.data
      //   })

      // }
    },
    async onGetCode() {
      console.log(this.isGetting)
      if(this.isGetting) return
      if (!this.onCheckVal("phone", this.formData.mobileNo)) return;
      if (this.time != 59) return;
      this.isGetting = true
      if (this.timer && this.time != 59) clearInterval(this.timer);
      if (this.formData.accountType === 1) {
        await getCode({
          mobile: this.formData.mobileNo,
        }).catch(() => {
          clearInterval(this.timer);
          this.time = 59;
          this.isGetting = false
        });
      } else {
        if (!this.formData.accountNumber){
          return this.$u.toast("请输入银行卡号");
        }
        await getBankInfo(this.formData.accountNumber).then((res) => {
          console.log(res);
          this.bankInfo = res.data;
        }).catch(() => {
          clearInterval(this.timer);
          this.time = 59;
          this.isGetting = false
        });
        // 银行卡
        if (!this?.bankInfo?.support) {
          return this.$u.toast("不支持该银行卡");
        }
        const res = await getBankCode({ ...this.formData }).catch(() => {
          clearInterval(this.timer);
          this.time = 59;
          this.isGetting = false
        });
        console.log(res);
        this.bankInfo.transactionId = res.data;
      }
      this.btnText = this.time + "s";
      uni.showToast({
        icon: "none",
        title: "验证码已发送",
        duration: 3000,
      });
      this.timer = setInterval(() => {
        this.time--;
        if (this.time == 0) {
          this.btnText = "获取验证码";
          clearInterval(this.timer);
          this.time = 59;
          this.isGetting = false
        } else {
          this.btnText = this.time + "s";
        }
      }, 1000);
    },
    async onSave() {
      if (!this.onCheckVal("idNumber", this.formData.identityNo)) return;
      if (!this.formData.accountNumber)
        return this.$u.toast(
          `请输入${this.formData.accountType == 0 ? "银行卡号" : "支付宝账号"}`
        );
      if (!this.onCheckVal("phone", this.formData.mobileNo)) return;

      if (!this.formData.verifyCode) return this.$u.toast("请输入验证码");
      if (!this.isAgree) return (this.showTip = true);
      let userInfo = uni.getStorageSync("userInfo");
      userInfo = JSON.parse(userInfo);
      this.formData.id = userInfo.userId;
      console.log(this.formData);
      if (this.formData.accountType == 0) {
        if (!this.bankInfo?.support) {
          return this.$u.toast("不支持该银行卡");
        }
        await accountBankSave({
          ...this.formData,
          transactionId: this.bankInfo.transactionId,
        });
      } else {
        await accountAliSave({ ...this.formData }).then((res) => {
          console.log("res");
        });
      }
      this.$u.toast("添加成功！");
      setTimeout(() => {
        uni.navigateBack();
      }, 500);
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common.less");
.content {
  box-sizing: border-box;
  height: 100%;
  background: #f7f8ff;
  padding: 32rpx;
  font-size: 32rpx;
  color: rgba(7, 11, 28, 0.9);
  .item {
    margin-bottom: 32rpx;
    align-items: center;
    .label {
      width: 170rpx;
    }
    .info {
      .r-type {
        margin-right: 80rpx;
      }
      .radio {
        width: 48rpx;
        height: 48rpx;
      }
    }
    .input {
      background: #ffffff;
      flex: 1;
      height: 80rpx;
      border-radius: 8rpx;
      padding: 0 32rpx;
    }
    .code-input {
      border-radius: 8rpx 0 0 8rpx;
    }
    .code-btn {
      height: 80rpx;
      width: 224rpx;
      border-radius: 0 8rpx 8rpx 0;
      &.code-btn-disabled {
        opacity: 0.5;
      }
    }
  }
  .protol {
    // margin-top: 300rpx;
    padding-left: 40rpx;
    margin-bottom: 32rpx;
    .protol-img {
      width: 48rpx;
      height: 48rpx;
    }
    .protol-text {
      color: #436af3;
    }
  }
  .fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    .btn-box {
      padding: 24rpx 48rpx;
      border-top: 2rpx solid #e9e9ea;
      width: 100%;
      background: #fff;
    }
    .active-btn {
      height: 88rpx;
    }
  }
}
</style>
